<template>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="类型:">
            <div class="flex">
                <el-select v-model="form.radioStationType" filterable placeholder="类型"
                    class="zt-input-min rihgt-m5" style="width: 120px;font-weight: 600;">
                    <el-option v-for="item in  dict.type.radio_station_type" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
                <el-form-item label="所属地:" prop="locatedAddress">
                    <el-select v-model="form.locatedAddress" filterable placeholder="所属地" @change="changeLocatedAddress"
                        class="zt-input-min rihgt-m5" style="width: 120px;font-weight: 600;font-size: 15px;">
                        <el-option v-for="item in  dict.type.located_address" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="天线:" v-show="form.locatedAddress">
                    <el-select v-model="form.antennaId" :popper-append-to-body="false" placeholder="请选择"
                        :popper-class="'t-select'" class="zt-input-min rihgt-m5" filterable style="width: 90%;">
                        <el-option-group v-for="group in antennaListAll" :key="group.label" :label="group.label">
                            <el-option v-for="item in group.options" :key="item.antennaId" :label="item.antennaName"
                                :value="item.antennaId">
                            </el-option>
                        </el-option-group>
                    </el-select>
                </el-form-item>


            </div>
        </el-form-item>

        <el-form-item label="硬件版本号:">
            <div class="flex">
                <el-input class="zt-input-min" style="width: 120px;" v-model="form.hardwareVersion" placeholder="版本号" />


                <el-form-item label="软件版本号:">
                    <el-input class="zt-input-min" style="width: 120px;" v-model="form.softwareVersion"
                        placeholder="版本号" />
                </el-form-item>


                <el-form-item label="入网状态::">
                    <el-select v-model="form.isNet" filterable placeholder="入网状态" :disabled="isNet == 1"
                        class="zt-input-min rihgt-m5">
                        <el-option key="0" label="未入网" value="0" />
                        <el-option key="1" label="已入网" value="1" />
                    </el-select>
                </el-form-item>

            </div>

        </el-form-item>

        <el-form-item label="电台名称:">
            <div class="flex">
                <el-input class="zt-input" v-model="form.radioStationName" placeholder="电台名称" />
                <el-button class="bt-blue " @click="submitForm" style="margin-left: 50px; ">确定</el-button>
            </div>
        </el-form-item>
        <el-form-item label="备注:" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
    </el-form>
</template>

<script>
import { getAntennaListAll } from "@/api/business/antenna";
import { getStation , updateStation, addStation} from "@/api/business/station";
export default {
    name: 'editDevice',
    dicts: ['radio_station_type', 'located_address'],
    emits: ['close'],
    props: {
        radioStationId: {}
    },
    watch: {
    },
    data() {
        return {
            form: {
                isNet: 1,
            },
            rules: {},
            // 设备入网状态
            isNet: null,
            //天线集合
            antennaListAll: [
                { label: '已使用', options: [] },
                { label: '未使用', options: [] },
            ],
        }
    },
    created() {
        this.init();
    },
    methods: {
        // 初始化获取详情
        init() {
            if(!this.radioStationId) return;
            getStation(this.radioStationId).then(rs => {
                this.form = rs.data;
                if (this.form.locatedAddress) {
                    this.getListAll(this.form.locatedAddress);
                    this.getAntennaUsed();
                }
            });
        },
        getAntennaUsed() {
            this.antennaListAll[0].options = [];
            for (let i = 0; i < this.form.pltAntennaList.length; i++) {
                if (this.form.pltAntennaList[i].isUsed * 1 == 1) {
                    const data = {
                        antennaId: this.form.pltAntennaList[i].antennaId,
                        isUsed: 0,
                        antennaName: this.form.pltAntennaList[i].antennaName,
                    }
                    this.antennaListAll[0].options.push(data)
                    this.$set(this.form, 'antennaId', this.form.pltAntennaList[i].antennaId);
                }
            }

        },
        // 所属地变动事件
        changeLocatedAddress(index) {
            this.$set(this.form, 'antennaId', null);
            this.getListAll(index);
        },
        // 重新查询天线
        async getListAll(index) {//查询数据集合 
            this.resetListAll();
            const data = {
                locatedAddress: index,
                isUsed: 0,
            }
            await getAntennaListAll(data).then(response => {
                this.antennaListAll[1].options = response.rows;
            });
        },
        resetListAll() {
            this.antennaListAll = [//天线集合
                { label: '已使用', options: [] },
                { label: '未使用', options: [] },
            ]
        },
        //提交前将传感器转换
        setPltAntennaList() {
            let data = []
            if (this.antennaListAll[0].options.length >= 1) data.push(this.antennaListAll[0].options[0])
            if (this.form.antennaId) data.push({ antennaId: this.form.antennaId, isUsed: 1 })
            data = data.filter(item => item.antennaId != null && item.antennaId != []);
            this.$set(this.form, 'pltAntennaList', data);
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.setPltAntennaList();
                    if (this.form.radioStationId != null) {
                        updateStation(this.form).then(response => {
                            this.$message.success("修改成功");
                            this.$emit('close')
                        });
                    } else {
                        addStation(this.form).then(response => {
                            this.$message.success("新增成功");
                            this.$emit('close')
                        });
                    }
                }
            });

        },
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped></style>